{% load static unfold %}
<div class="bg-white border-b border-base-200 mb-4 px-4 z-40 dark:bg-base-900 dark:border-base-800 dark:text-font-default-dark {% element_classes 'header' %}">
  <div class="{% if not cl.model_admin.list_fullwidth and is_fullwidth != '1' %}container{% endif %} flex items-center min-h-16 mx-auto py-3 {% element_classes 'header_inner' %}">
    <div id="header-inner" class="flex items-center relative w-full">
      <div class="flex items-center w-full">
        {% include 'unfold/helpers/welcomemsg.html' %}
        <div class="k4w-admin-header-actions" x-data="{ notificationsOpen:false, profileOpen:false }">
          {% if environment %}<span class="k4w-env-pill">{{ environment.0 }}</span>{% endif %}
          <a class="k4w-header-icon" href="{% url 'admin:core_portalconfiguration_changelist' %}" title="Configuração"><span class="material-symbols-outlined">settings</span></a>
          <div class="k4w-header-popover-wrap">
            <button class="k4w-header-icon" type="button" title="Notificações" x-on:click="notificationsOpen=!notificationsOpen;profileOpen=false"><span class="material-symbols-outlined">notifications</span>{% if k4w_notification_count %}<b>{{ k4w_notification_count }}</b>{% endif %}</button>
            <div class="k4w-header-popover k4w-header-notifications" x-cloak x-show="notificationsOpen" x-transition x-on:click.outside="notificationsOpen=false">
              <div class="k4w-popover-title"><strong>Notificações</strong><a href="{% url 'operations_center' %}">Centro de operações</a></div>
              {% for item in k4w_admin_notifications %}<a href="{{ item.url }}"><span class="material-symbols-outlined">{{ item.icon }}</span><div><strong>{{ item.title }}</strong><small>{% if item.count %}{{ item.count }} por tratar{% else %}Sem ocorrências{% endif %}</small></div>{% if item.count %}<b class="tone-{{ item.tone }}">{{ item.count }}</b>{% endif %}</a>{% empty %}<p>Não existem notificações.</p>{% endfor %}
            </div>
          </div>
          <div class="k4w-header-popover-wrap">
            <button class="k4w-admin-profile-chip" type="button" x-on:click="profileOpen=!profileOpen;notificationsOpen=false">
              <span class="k4w-profile-avatar">{% if k4w_user_profile.avatar %}<img src="{{ k4w_user_profile.avatar.url }}" alt="">{% else %}{{ request.user.get_full_name|default:request.user.username|first|upper }}{% endif %}</span>
              <span><strong>{{ request.user.get_full_name|default:request.user.username }}</strong><small>{% if request.user.is_superuser %}Superadministrador{% else %}Equipa K4W{% endif %}</small></span>
              <span class="material-symbols-outlined">expand_more</span>
            </button>
            <nav class="k4w-header-popover k4w-profile-menu" x-cloak x-show="profileOpen" x-transition x-on:click.outside="profileOpen=false">
              <p>CONTA</p>
              <a href="{% url 'admin:index' %}"><span class="material-symbols-outlined">space_dashboard</span>Painel</a>
              <a href="{% url 'security:account' %}"><span class="material-symbols-outlined">person</span>Editar a minha conta</a>
              <a href="{% url 'security:overview' %}"><span class="material-symbols-outlined">security</span>Segurança e 2FA{% if k4w_two_factor_enabled %}<em>Ativo</em>{% endif %}</a>
              <form method="post" action="{% url 'security:logout' %}">{% csrf_token %}<button type="submit"><span class="material-symbols-outlined">logout</span>Terminar sessão</button></form>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>